<template>
  <div>
    <main class="container">
      <div class="content" v-if="flag">
        <van-card :thumb="userStore.avatar" class="user_card" @click="router.push('/my-message')">
          <template #title>
            <p class="user_name">{{ userStore.name }}</p>
          </template>
          <template #desc>
            <p class="user_desc">{{ userStore.sex == 1 ? "男" : "女" }}</p>
          </template>
          <template #tags>
            <p class="user_sign">{{ userStore.sign }}</p>
          </template>
        </van-card>
        <div style="background: #f0f0f0; padding-top: 10px">
          <van-cell
            icon="logistics"
            title="我的收货地址"
            is-link
            to="/address-list"
          />
          <van-cell icon="orders-o" title="我的订单" is-link to="/order" />
          <van-cell
            icon="description"
            title="我的文章"
            is-link
            to="/my-article"
          />
          <van-cell
            icon="star-o"
            title="我的收藏"
            is-link
            to="/my-collection"
          />
          <van-cell
            icon="good-job-o"
            title="我的点赞"
            is-link
            to="/thumbs-up"
          />
        </div>
        <div class="logout_box">
          <van-button class="logout_btn" type="warning" @click="logOut"
            >退出登录</van-button
          >
        </div>
      </div>
      <!-- 没登录显示的组件 -->
      <div v-else>
        <van-empty description="请先登录">
          <van-button
            @click="router.replace('/login')"
            round
            type="primary"
            style="width: 200px"
            >去登录</van-button
          >
        </van-empty>
      </div>
    </main>
  </div>
</template>

<script setup>
import { getToken,removeToken } from "@/utils/token";
// 登出接口
import { logout } from "@/api/user";
import { ref } from "vue";
import useUserInfo from "@/stores/useUserInfo";
// 从vant里面引入方法
import { showConfirmDialog, showSuccessToast } from "vant";
import {useRouter} from 'vue-router'

// 判断用户是否登录 本地是否有token
let flag = ref(getToken() ? true : false);
// 用户信息仓库
let userStore = useUserInfo();

// 路由器
let router=useRouter()

// 退出登录
let logOut = () => {
  showConfirmDialog({
    title: "退出登录",
    message: "是否确认退出登录",
  })
    .then(async () => {
      // 删除购物车商品接口
      await logout({ token:getToken()});
      // 清楚本地cookie
      removeToken()
      showSuccessToast("退出登录成功");
      // 回到登录页
      router.replace('/login')
    })
    .catch(() => {});
};
</script>


<style lang="less" scoped>
main.container {
  .user_card {
    background: #f0f0f0;
    margin-bottom: 10px;
    .user_name {
      line-height: 20px;
      margin-top: 2px;
      font-size: 20px;
      color: aqua;
    }
    .user_desc {
      line-height: 20px;
      margin: 6px 0;
    }
    .user_sign {
      line-height: 20px;
      font-size: 12px;
    }
  }
  .content {
    width: 100%;
    .logout_box {
      margin-top: 18px;
      padding: 0 10px;
      .logout_btn {
        width: 100%;
      }
    }
  }
  .no_login_content {
    .login_btn {
      width: 180px;
    }
  }
}
</style>

